{{#> notification-drawer-list}}
  {{#> notification-drawer-list-item notification-drawer-list-item--IsInfo="true" notification-drawer-list-item--IsRead=notification-drawer-basic-list--AllRead}}
    {{#> notification-drawer-list-item-header}}
      {{> notification-drawer-list-item-header-icon}}
      {{#> notification-drawer-list-item-header-title}}
        Unread info notification title
      {{/notification-drawer-list-item-header-title}}
    {{/notification-drawer-list-item-header}}
    {{#> notification-drawer-list-item-action}}
      {{#> dropdown id=(concat notification-drawer--id "-action1") dropdown-menu--modifier="pf-m-align-right" dropdown--IsActionMenu="true" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}}{{/dropdown}}
    {{/notification-drawer-list-item-action}}
    {{#> notification-drawer-list-item-description}}
      This is an info notification description.
    {{/notification-drawer-list-item-description}}
    {{#> notification-drawer-list-item-timestamp}}
      5 minutes ago
    {{/notification-drawer-list-item-timestamp}}
  {{/notification-drawer-list-item}}
  {{#> notification-drawer-list-item notification-drawer-list-item--IsDanger="true" notification-drawer-list-item--IsRead=notification-drawer-basic-list--AllRead}}
    {{#> notification-drawer-list-item-header}}
      {{> notification-drawer-list-item-header-icon}}
      {{#> notification-drawer-list-item-header-title}}
        Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
      {{/notification-drawer-list-item-header-title}}
    {{/notification-drawer-list-item-header}}
    {{#> notification-drawer-list-item-action}}
      {{#> dropdown id=(concat notification-drawer--id "-action2") dropdown-menu--modifier="pf-m-align-right" dropdown--IsActionMenu="true" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}}{{/dropdown}}
    {{/notification-drawer-list-item-action}}
    {{#> notification-drawer-list-item-description}}
      This is a danger notification description. This is a long description to show how the title will wrap if it is long and wraps to multiple lines.
    {{/notification-drawer-list-item-description}}
    {{#> notification-drawer-list-item-timestamp}}
      10 minutes ago
    {{/notification-drawer-list-item-timestamp}}
  {{/notification-drawer-list-item}}
  {{#> notification-drawer-list-item notification-drawer-list-item--IsDefault="true" notification-drawer-list-item--IsRead=notification-drawer-basic-list--AllRead}}
    {{#> notification-drawer-list-item-header}}
      {{> notification-drawer-list-item-header-icon}}
      {{#> notification-drawer-list-item-header-title}}
        Unread recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
      {{/notification-drawer-list-item-header-title}}
    {{/notification-drawer-list-item-header}}
    {{#> notification-drawer-list-item-action}}
      {{#> dropdown id=(concat notification-drawer--id "-action3") dropdown-menu--modifier="pf-m-align-right" dropdown--IsActionMenu="true" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}}{{/dropdown}}
    {{/notification-drawer-list-item-action}}
    {{#> notification-drawer-list-item-description}}
      This is a recommendation notification description. This is a long description to show how the title will wrap if it is long and wraps to multiple lines.
    {{/notification-drawer-list-item-description}}
    {{#> notification-drawer-list-item-timestamp}}
      20 minutes ago
    {{/notification-drawer-list-item-timestamp}}
  {{/notification-drawer-list-item}}
  {{#> notification-drawer-list-item notification-drawer-list-item--modifier="pf-m-hoverable" notification-drawer-list-item--IsWarning="true" notification-drawer-list-item--IsRead="true"}}
    {{#> notification-drawer-list-item-header}}
      {{> notification-drawer-list-item-header-icon}}
      {{#> notification-drawer-list-item-header-title}}
        Read warning notification title
      {{/notification-drawer-list-item-header-title}}
    {{/notification-drawer-list-item-header}}
    {{#> notification-drawer-list-item-action}}
      {{#> dropdown id=(concat notification-drawer--id "-action4") dropdown--modifier="pf-m-top" dropdown-menu--modifier="pf-m-align-right" dropdown--IsActionMenu="true" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}}{{/dropdown}}
    {{/notification-drawer-list-item-action}}
    {{#> notification-drawer-list-item-description}}
      This is a warning notification description.
    {{/notification-drawer-list-item-description}}
    {{#> notification-drawer-list-item-timestamp}}
      20 minutes ago
    {{/notification-drawer-list-item-timestamp}}
  {{/notification-drawer-list-item}}
  {{#> notification-drawer-list-item notification-drawer-list-item--modifier="pf-m-hoverable" notification-drawer-list-item--IsSuccess="true" notification-drawer-list-item--IsRead="true"}}
    {{#> notification-drawer-list-item-header}}
      {{> notification-drawer-list-item-header-icon}}
      {{#> notification-drawer-list-item-header-title}}
        Read success notification title
      {{/notification-drawer-list-item-header-title}}
    {{/notification-drawer-list-item-header}}
    {{#> notification-drawer-list-item-action}}
      {{#> dropdown id=(concat notification-drawer--id "-action5") dropdown--modifier="pf-m-top" dropdown-menu--modifier="pf-m-align-right" dropdown--IsActionMenu="true" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}}{{/dropdown}}
    {{/notification-drawer-list-item-action}}
    {{#> notification-drawer-list-item-description}}
      This is a success notification description.
    {{/notification-drawer-list-item-description}}
    {{#> notification-drawer-list-item-timestamp}}
      30 minutes ago
    {{/notification-drawer-list-item-timestamp}}
  {{/notification-drawer-list-item}}
  {{#> notification-drawer-list-item notification-drawer-list-item--modifier="pf-m-hoverable" notification-drawer-list-item--IsSuccess="true" notification-drawer-list-item--IsRead="true"}}
    {{#> notification-drawer-list-item-header}}
      {{> notification-drawer-list-item-header-icon}}
      {{#> notification-drawer-list-item-header-title notification-drawer-list-item-header-title--modifier="pf-m-truncate"}}
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis odio risus. Ut dictum vitae sapien at posuere. Nullam suscipit massa quis lacus pellentesque scelerisque. Donec non maximus neque, quis ornare nunc. Vivamus in nibh sed libero feugiat feugiat. Nulla lacinia rutrum est, a commodo odio vestibulum suscipit. Nullam id quam et quam porttitor interdum quis nec tellus. Vestibulum arcu dui, pulvinar eu tellus in, semper mattis diam. Sed commodo tincidunt lacus non pulvinar. Curabitur tempor molestie vestibulum. Vivamus vel mi dignissim, efficitur neque eget, efficitur massa. Mauris vitae nunc augue. Donec augue lorem, malesuada et quam vitae, volutpat mattis nisi. Nullam nec venenatis ex, quis lobortis purus. Sed nisl dolor, mattis sit amet tincidunt quis, mollis sed massa.
      {{/notification-drawer-list-item-header-title}}
    {{/notification-drawer-list-item-header}}
    {{#> notification-drawer-list-item-action}}
      {{#> dropdown id=(concat notification-drawer--id "-action6") dropdown--modifier="pf-m-top" dropdown-menu--modifier="pf-m-align-right" dropdown--IsActionMenu="true" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}}{{/dropdown}}
    {{/notification-drawer-list-item-action}}
    {{#> notification-drawer-list-item-description}}
      This example uses ".pf-m-truncate" to limit the title to a single line and truncate any overflow text with ellipses.
    {{/notification-drawer-list-item-description}}
    {{#> notification-drawer-list-item-timestamp}}
      40 minutes ago
    {{/notification-drawer-list-item-timestamp}}
  {{/notification-drawer-list-item}}
  {{#> notification-drawer-list-item notification-drawer-list-item--modifier="pf-m-hoverable" notification-drawer-list-item--IsSuccess="true" notification-drawer-list-item--IsRead="true"}}
    {{#> notification-drawer-list-item-header}}
      {{> notification-drawer-list-item-header-icon}}
      {{#> notification-drawer-list-item-header-title  notification-drawer-list-item-header-title--modifier="pf-m-truncate"  notification-drawer-list-item-header-title--attribute='style="--pf-c-notification-drawer__list-item-header-title--max-lines: 2"'}}
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis odio risus. Ut dictum vitae sapien at posuere. Nullam suscipit massa quis lacus pellentesque scelerisque. Donec non maximus neque, quis ornare nunc. Vivamus in nibh sed libero feugiat feugiat. Nulla lacinia rutrum est, a commodo odio vestibulum suscipit. Nullam id quam et quam porttitor interdum quis nec tellus. Vestibulum arcu dui, pulvinar eu tellus in, semper mattis diam. Sed commodo tincidunt lacus non pulvinar. Curabitur tempor molestie vestibulum. Vivamus vel mi dignissim, efficitur neque eget, efficitur massa. Mauris vitae nunc augue. Donec augue lorem, malesuada et quam vitae, volutpat mattis nisi. Nullam nec venenatis ex, quis lobortis purus. Sed nisl dolor, mattis sit amet tincidunt quis, mollis sed massa.
      {{/notification-drawer-list-item-header-title}}
    {{/notification-drawer-list-item-header}}
    {{#> notification-drawer-list-item-action}}
      {{#> dropdown id=(concat notification-drawer--id "-action7") dropdown--modifier="pf-m-top" dropdown-menu--modifier="pf-m-align-right" dropdown--IsActionMenu="true" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}}{{/dropdown}}
    {{/notification-drawer-list-item-action}}
    {{#> notification-drawer-list-item-description}}
      This example uses ".pf-m-truncate" and sets "--pf-c-notification-drawer__list-item-header-title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.
    {{/notification-drawer-list-item-description}}
    {{#> notification-drawer-list-item-timestamp}}
      50 minutes ago
    {{/notification-drawer-list-item-timestamp}}
  {{/notification-drawer-list-item}}
{{/notification-drawer-list}}
